<script setup lang="ts">
import EditRow from './editRow.vue'
import {
    appFlowOathById,
    appFlowDetailListExport
} from '@/api/app';
import { VITE_APP_IMAGE_BASE_URL as baseImage } from '@/utils/base';
import { formatMillisecondsToDate, aDownloadFile } from '@/utils/utils'
import { clearFormData } from '@/utils/utils';

const props = defineProps({
    dialog: {
        required: true,
        type: Object,
        default: {}
    },
    formData: {
        required: true,
        type: Object,
        default: {}
    },
})

const { dialog, formData } = props
const emit = defineEmits(['resetQuery'])

const dataFormRef = ref(ElForm);

const total = ref(0);
const dataList: any = ref([])

const queryParams: any = reactive({
    current: 1,
    pageSize: 9999,
    beginTime: '',
    endTime: '',
});

const rowData = reactive({

});

const dialogRow = reactive<any>({
    visible: false,
});

/**
 * 关闭弹窗
 */
function closeDialog() {
    dialog.visible = false;
    resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
    clearFormData(formData);
    formData.status = 1
}


/**
 * 确定
 */
function handleSubmit() {
    appFlowDetailListExport(queryParams)
        .then((res: any) => {
            aDownloadFile({ url: res.data });
            ElMessage.success('操作成功！');
        })
}

/**
 * 查询
 */
function handleQuery() {
    appFlowOathById(queryParams)
        .then((res: any) => {
            dataList.value = res.data.data;
            total.value = res.data.total;
            dataList.value.forEach((ele: any) => {
                ele.status = 1
                ele.data && ele.data.forEach((eleChild: any) => {
                    if (eleChild.result === '执行异常') ele.status = 2
                });
            });
        })
}

/**
 * 类型表单弹窗
 *
 */
function openRowDialog(row?: object) {
    dialogRow.visible = true;
    if (row) {
        dialogRow.title = '';
        Object.assign(rowData, row);
    } else {
        resetForm();
        dialogRow.title = '';
    }
}

// 导出
function handleExport() {
    // linedataExport(queryParams)
    //     .then((res: any) => {
    //         aDownloadFile({ url: res.data });
    //         ElMessage.success('操作成功！');
    //     })
}

watch(() => dialog.visible, (val) => {
    if (val) {
        queryParams.beginId = formData.beginId
        queryParams.endId = formData.endId

        handleQuery()
    }
})

onMounted(() => {

});
</script>

<template>
    <div>
        <!--线路绑定-->
        <el-dialog :title="dialog.title" v-model="dialog.visible" width="1000px" @close="closeDialog">
            <div>
                <VCardFlow v-for="item in dataList" :title="item.title" :key="item.id" :formData="item">
                    <el-table :data="item.data" :show-header="false">
                        <el-table-column label="动作类型" align="center" prop="object" />
                        <el-table-column label="执行动作" align="left">
                            <template #default="scope">
                                执行动作：{{ scope.row.action }}
                            </template>
                        </el-table-column>
                        <el-table-column label="具体操作" align="center" prop="type" />
                        <el-table-column label="结果" align="left" width="120">
                            <template #default="scope">
                                <el-tag v-if="scope.row.result === '执行完成'" type="success">执行完成</el-tag>
                                <el-tag v-else="scope.row.result === '执行异常'" type="danger">执行异常</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作时间" align="center" width="200">
                            <template #default="scope">
                                {{ formatMillisecondsToDate(scope.row.createdAt) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" fixed="right" align="left" width="100">
                            <template #default="scope">
                                <el-button v-if="scope.row.childIds" type="primary" link size="small"
                                    @click.stop="openRowDialog(scope.row)">
                                    <i-ep-view />详情日志
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </VCardFlow>

            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleSubmit">导 出</el-button>
                    <el-button @click="closeDialog">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <EditRow :dialog="dialogRow" :formData="rowData"></EditRow>
    </div>
</template>

<style scoped>
.a-class {
    color: dodgerblue;
    margin-left: 10px;
}

.upload-demo .upload-demo-img {
    width: 100px;
    height: 100px;
    display: block;
}

:deep(.el-upload-list) {
    display: none !important;
}
</style>

<style>
.upload-demo .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.upload-demo .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.upload-demo-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>